<template>
  <div class="jxjyalllbox">
    <!-- <div class="jxjy_top">
      <div class="tishi">
        <p class="zw">学习流程</p>
        <p class="eng">LEARNING PROCESS</p>
      </div>
      <div class="jxjy_logo_box">
        <div class="jxjy_logo" v-for="(item, i) in list" :key="i">
          <div>
            <div class="jxjy_logo_item"><img :src="item.url" alt="" /></div>
            <div class="logo_text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="tab_box">
      <div class="kclx_box">
        <div class="button">课程类型</div>
        <div class="button" v-for="(item, index) in classlist" :key="index" v-on:click="togglekc(index, item.id)"
          :class="{ activekc: activekc === index }">
          {{ item.name }}
        </div>
      </div>
      <div class="kcnf_box">
        <div class="button">课程年份</div>
        <div class="button" v-for="(item, index) in timelist" :key="index" v-on:click="toggle(index, item.id)"
          :class="{ activesj: activeButton === index }">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="sp_box">
      <div class="sp_title">
        <div class="sp_title_xz" v-for="(item, index) in xzlist" :key="index" v-on:click="togglexz(index, item.value)"
          :class="{ sp_title_xz_active: activexz === index }">
          {{ item.name }}
        </div>
        <div>
          <div class="sjx" @click="tb(1, 'asc')" :class="{ tbactive: tbqh === 1 }"></div>
          <div class="sjx" @click="tb(2, 'desc')" :class="{ tbactive: tbqh === 2 }"></div>
        </div>
      </div>
      <div class="sp_nr_box">
        <div oncontextmenu="return false;" class="sp_nr_box_item" v-for="(item, index) in splist" :key="index">
          <div class="sp_nr_imgbox" :data-content="item.type_name">
            <img :src="$self.imgurl(item.image)" alt="" />
          </div>
          <div class="zj_box">
            <div class="zj_box_title">{{ item.name }}</div>
            <div class="zj_box_kh">{{ item.class_hour }}课时</div>
            <div class="zj_box_ls">授课老师：{{ item.teacher_name }}</div>
          </div>
          <div class="zj_box_button">
            <div class="zj_button" v-if="item.status == 0" @click="selectclass(item.id)">
              立即选课
            </div>
            <div class="zj_button" style="background: #707172" v-if="item.status == 1">
              已选课
            </div>
          </div>
        </div>
        <div class="sp_nr_box_item" v-for="(item, index) in 3" :key="index + 12" style="
            height: 0;
            margin: 0;
            padding: 0;
            min-height: 0;
            box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 0);
          "></div>
      </div>
      <div class="pagination_hy">
        <el-pagination hide-on-single-page background :pager-count="5" layout="prev, pager, next"
          @current-change="handleCurrentChange" :current-page="currentPage" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { name: "平台登录", url: require("../../assets/image/1.png") },
        { name: "选择课程", url: require("../../assets/image/2.png") },
        { name: "课程学习", url: require("../../assets/image/3.png") },
        { name: "进度统计", url: require("../../assets/image/4.png") },
      ], //顶部导航

      activeButton: 0, //年份高亮标识
      activekc: 0, //课程高亮标识
      activexz: 0, //导航高亮标识
      tbqh: 2, //学时高亮标识
      sort: "desc", //默认学时降序
      xzlist: [
        {
          value: "all",
          name: "综合",
        },
        {
          value: "new",
          name: "最新",
        },
        {
          value: "hot",
          name: "最热",
        },
        {
          value: "duty",
          name: "学时",
        },
      ], //导航列表
      order: "all", //默认综合排序
      timelist: [], //年份列表
      year_id: "",
      classlist: [], //类型列表
      type_id: "", //类型id

      splist: [], //视频列表
      total: 0,
      currentPage: 1,
    };
  },
  mounted() {
    this.getclass();
    this.getyear();
    this.getinfo();
  },
  methods: {
    /**
     * 分页
     * @param {页码} page
     */
    handleCurrentChange(page) {
      // 当分页发生变化时的处理函数
      this.currentPage = page;
      this.getinfo();
    },
    /**
     * 获取课程类型
     */
    getclass() {
      let that = this;
      let data = {};
      that.$http.post("education/type_list", data).then((res) => {
        if (res.code === 1) {
          that.classlist = res.data;
          let obj = { id: "", name: "全部" };
          that.classlist.unshift(obj);
        } else {
          that.classlist = [{ id: "", name: "全部" }];
        }
      });
    },
    /**
     * 切换课程类型
     * @param {切换标识} e
     * @param {课程类型id} id
     */
    togglekc(e, id) {
      this.activekc = e;
      if (this.type_id == id) {
        return;
      }
      this.type_id = id;
      // console.log(this.type_id);
      this.currentPage = 1
      this.getinfo();
    },
    /**
     * 获取年份
     */
    getyear() {
      let that = this;
      let data = {};
      that.$http.post("education/year_list", data).then((res) => {
        if (res.code === 1) {
          that.timelist = res.data;
          let obj = { id: "", name: "全部" };
          that.timelist.unshift(obj);
        } else {
          that.timelist = [{ id: "", name: "全部" }];
        }
      });
    },
    /**
     * 切换年份
     * @param {切换标识} e
     * @param {年份id} id
     */
    toggle(e, id) {
      this.activeButton = e;
      if (this.year_id == id) {
        return;
      }
      this.year_id = id;
      // console.log(this.year_id);
      this.currentPage = 1
      this.getinfo();
    },

    /**
     * 切换导航
     * @param {标识id} e
     * @param {导航id} value
     *
     */
    togglexz(e, value) {
      this.activexz = e;
      this.tbqh = 2; //跳转到其它选项学时自动升序(这是用来高亮的)
      this.order = value;
      this.currentPage = 1
      this.getinfo();
    },
    /**
     * 切换导航学时
     * @param {排序的标识} e
     */
    tb(e, value) {
      this.activexz = 3; //点击学时上下直接高亮显示学时按钮
      this.tbqh = e;
      this.order = "duty";
      this.sort = value;
      this.currentPage = 1
      this.getinfo();
    },
    /**
     * 获取视频列表
     */
    getinfo() {
      let that = this;
      let data = {
        type_id: that.type_id,
        year_id: that.year_id,
        page: that.currentPage,
        size: 8,
        order: that.order,
        sort: that.sort,
      };
      that.$http.post("education/list", data).then((res) => {
        if (res.code === 1) {
          that.total = res.data.total;
          that.splist = res.data.data;
        } else {
          that.total = 0;
          that.splist = [];
        }
      });
    },
    /**
     * 选课
     * @param {课程id} id
     */
    selectclass(id) {
      let that = this;
      let data = {
        id: id,
      };
      that.$http.post("education/class_save", data).then((res) => {
        that.$self.ts(res, 3);
        if (res.code == 1) {
          this.getinfo();
        }
      });
    },
    //  ==
  },
};
</script>
<style scoped>
.jxjyalllbox {
  margin-left: 0.625rem;
  width: 14.5rem;
}

.jxjy_top {
  height: 1.125rem;
  background: #ffffff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  margin-bottom: 0.5rem;
}

.tishi {
  width: 2.5rem;
  height: 100%;
  background: #1954a4;
  font-size: 0.375rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding-top: 0.2375rem;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.eng {
  font-size: 0.15rem;
}

.jxjy_logo_box {
  display: flex;
  align-items: center;
  flex: 1;
}

.jxjy_logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jxjy_logo:first-child {
  margin-left: 1.4rem;
}

.jxjy_logo:last-child {
  margin-right: 0.8rem;
}

.jxjy_logo_item {
  width: 0.625rem;
  height: 0.625rem;
  background: #1954a4;
  border-radius: 50%;
  /* margin-left: 0.0575rem; */
  margin: 0 auto;
}

.jxjy_logo_item img {
  height: 100%;
  width: 100%;
}

.logo_text {
  font-size: 0.175rem;
  font-weight: 400;
  color: #7c7c7c;
  margin-top: 0.1125rem;
}

.tab_box {
  height: 1.25rem;
  background: #f5f7fa;
  margin: 0 auto 0.5rem;
  font-size: 0.175rem;
  font-weight: 400;
  color: #333333;
  padding: 0.2875rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.button {
  padding: 0.0875rem 0.1375rem;
  cursor: pointer;
  margin-right: 0.17rem;
}

.button:last-child {
  margin-right: 0;
}

.kclx_box {
  display: flex;
  margin: 0 0.225rem 0 0.225rem;
}

.kcnf_box {
  display: flex;
  margin: 0.375rem 0.225rem 0 0.225rem;
}

.activesj {
  padding: 0.0875rem 0.1375rem;
  background: #1954a4;
  border-radius: 0.025rem;
  color: #ffffff;
}

.activekc {
  padding: 0.0875rem 0.1375rem;
  background: #1954a4;
  border-radius: 0.025rem;
  color: #ffffff;
}

.sp_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  padding-bottom: 0.4875rem;
  margin-bottom: 0.1rem;
}

.sp_title {
  padding: 0.2875rem;
  display: flex;
  border-bottom: 0.025rem solid #1954a4;
}

.sp_title_xz {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  margin-right: 0.6rem;
  cursor: pointer;
  display: flex;
}

.sp_title_xz:nth-child(4) {
  margin-right: 0.064rem !important;
}

.sjx {
  width: 0;
  height: 0;
  border-left: 0.0875rem solid transparent;
  border-right: 0.0875rem solid transparent;
  border-bottom: 0.1rem solid #cccccc;
  margin-top: 0.0375rem;
  cursor: pointer;
}

.sjx:nth-child(2) {
  transform: rotate(180deg);
}

.tbactive {
  border-bottom: 0.1rem solid #1954a4;
}

.sp_title_xz_active {
  position: relative;
  color: #1954a4;
}

.sp_title_xz_active::after {
  content: "";
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0.17rem;
  height: 0.025rem;
  background: #1954a4;
}

.sp_nr_box {
  padding: 0.25rem 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sp_nr_box_item {
  width: 3.375rem;
  min-height: 4.3rem;
  margin-bottom: 0.325rem;
  background: #f6f9fc;
  border-radius: 0.075rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.1);
}

.sp_nr_imgbox {
  height: 1.9125rem;
  border-radius: 0.075rem 0.075rem 0px 0px;
}

.sp_nr_imgbox img {
  width: 100%;
  height: 100%;
}

/* .sp_nr_imgbox::after {
  content: attr(data-content);
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0.625rem;
  height: 0.25rem;
  background: #1954a4;
  border-radius: 0px 0.075rem 0px 0px;
  text-align: center;
  font-size: 0.175rem;
  font-weight: 400;
  color: #ffffff;
} */

.zj_box {
  border-bottom: 1px solid #e6e6e6;
  width: 94%;
  margin: auto;
}

.zj_box_title {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  margin: 0.15rem 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.zj_box_kh {
  width: 1.25rem;
  height: 0.35rem;
  background: #e4edfd;
  border-radius: 0.1375rem;
  text-align: center;
  margin: 0.3rem 0.06rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.35rem;
}

.zj_box_ls {
  font-size: 0.175rem;
  font-weight: 400;
  color: #7c7c7c;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.zj_box_button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin: 0.135rem;
}

.zj_button {
  width: 1.125rem;
  height: 0.375rem;
  background: #1954a4;
  border-radius: 0.1875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
}

.zj_button:hover {
  background: #43699e;
}
</style>